<template>
  <div id="more">
    <mt-header fixed :title="title()" class="head">
         <div slot="left">
           <mt-button style="margin-left:15%;"  @click.native="goback" >
           <
         </mt-button>
         </div>
    </mt-header>
    <div v-for="(i,index) in moreItem" class="moreItem">
        <img :src="getImg(index)" alt="">
        <div class="moreTitle">
            {{i.title}}
        </div>
        <div class="moreClass">
            {{i.class}}
        </div>
    </div>
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
        moreItem:{
            more0:{
                img:"../src/assets/more img/拳打&脚踢.png",
                title:"拳打&脚踢",
                class:"灵活运用上下段攻击打到独眼怪人"
               
            },
            more1:{
                img:"../src/assets/more img/一击牛仔.png",
                title:"一击牛仔",
                class:"什么，午时又已经到了？"
            },
            more2:{
                img:"../src/assets/more img/落板.png",
                title:"落板",
                class:"保持冷静，千万不要砸手机"
            },
            more3:{
                img:"../src/assets/more img/银河护卫队：故事版.png",
                title:"银河护卫队：故事版",
                class:"漫威最不传统宇宙英雄战队的故事"
            },
            more4:{
                img:"../src/assets/more img/魔法门之古堡恶灵.png",
                title:"魔法门之古堡恶灵",
                class:"众多知名英雄合理的融入到战棋玩法"
            },
            more5:{
                img:"../src/assets/more img/诛神乾坤.png",
                title:"诛神乾坤",
                class:"一款ARPG类型的仙侠手游"
            },
            more6:{
                img:"../src/assets/more img/父与子.png",
                title:"父与子",
                class:"油画风格体验动人故事"
            },
            more7:{
                img:"../src/assets/more img/反转.png",
                title:"反转",
                class:"不好好做音乐的乐队开发的小玩意"
            },
            more8:{
                img:"../src/assets/more img/天启之门.png",
                title:"天启之门",
                class:"穿越天启，狩猎一切！"
            },
            more9:{
                img:"../src/assets/more img/勇者大作战.png",
                title:"勇者大作战",
                class:"像素风无限放置手游"
            }
            },
        }
    },
  methods:{
      title(){
            return this.$store.state.moreTitle;
        },
      getImg(i){
        return this.moreItem[i].img;
      },
      goback(){
       this.$router.go(-1);
    },
    //   gomore(i){
    //     console.log(i);
    //     this.$router.push({path: 'moreD'});
    //   },
     
  }
 
}
</script>

<style>
#more{
    
    margin-top: 10%;
}
#more .head{
  background-color: #2c46a5;
}
#more .moreItem{
    padding-top: 2.5%;
    padding-left: 2%;
    width: 100%;
    padding-bottom: 18%;
    text-align: left;
    border-bottom: 1px gray solid;
    background-color: #e5e8eb;
}
#more .moreItem img{
    width: 15%;
    float: left;
}
#more .moreItem .moreTitle{
    width: 75%;
    float: left;
    word-wrap: break-word;
    color:#50a6d2;
    font-size: 350%;
    margin-left: 2%;
}
#more .moreItem .moreClass{
    width: 75%;
    float: left;
    font-size: 220%;
    margin-top: 2%;
    margin-left: 2%;
    color:#8d8d8d;
}
</style>
